<template>
    <div id="Infrastructure">
        <div class="Infrastructure-map">
            <div class="maps">
                <iframe
                        src="http://58.18.173.195:8082/mengenergy-app/neimeng-app/storage/infrastructure.html"
                        frameborder="0"
                ></iframe>
            </div>
        </div>
        <div class="Infrastructure-data">
            <div class="Infrastructure-datas">
                <div v-for="(v,i) in datas" :key="i">
                    <div>
                        <div>
                            <img :src="v.logo" />
                        </div>
                        <div>{{v.titles}}</div>
                    </div>
                    <div>
                        <div></div>
                        <div>
                            {{v.nums}}
                            <span>{{v.unit}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Infrastructure-chartOne">
            <div>
                <!-- @change="changeEchartsO"-->
                <van-tabs v-model="activeNameOne" @click="onclickOne" >
                    <!-- @click="onclick" -->
                    <van-tab title="原油输送能力" name="a"></van-tab>
                    <van-tab title="天然气输送能力" name="b"></van-tab>
                    <van-tab title="煤炭运输能力" name="c"></van-tab>
                </van-tabs>
            </div>
            <div>
                <div id="crudeOil" v-show="activeNameOne == 'a'" ></div>
                <div id="naturalGas" v-show="activeNameOne == 'b'"></div>
                <div id="coal" v-show="activeNameOne == 'c'"></div>
                <!-- <div id="crudeil"  ></div> -->
            </div>
            <!-- <div v-show=" activeNameTwo == 'b'"> <div id="naturalGas"></div></div>
            <div id="crudeil"  v-show=" activeNameTwo == 'c'">111</div>-->
        </div>
        <div class="Infrastructure-chartTwo">
            <div>
                <!--  @change="changeEchartsT"  -->
                <van-tabs v-model="activeNameTwo" @click="onclickTwo">
                    <van-tab title="电网线路输电容量" name="1"></van-tab>
                    <van-tab title="原油储藏能力" name="2"></van-tab>
                    <van-tab title="天然气储藏能力" name="3"></van-tab>
                </van-tabs>
            </div>
            <div>
                <div id="grids" v-show="activeNameTwo == '1'"></div>
                <div id="store" v-show="activeNameTwo == '2'"></div>
                <div id="natural" v-show="activeNameTwo == '3'"></div>
            </div>
            <!-- <div v-show=" activeNameTwo == 'b'"> <div id="naturalGas"></div></div>
            <div id="crudeil"  v-show=" activeNameTwo == 'c'">111</div>-->
        </div>
    </div>
</template>
<script>
    import echarts from "echarts";
    export default {
        data() {
            return {
                activeNameOne: "a",
                activeNameTwo: "1",
                actualy:[],
                designy:[],
                timery:[],
                actualq:[],
                designq:[],
                timerq:[],
                actualc:[],
                designc:[],
                timerc:[],
                actual:[],
                design:[],
                timer:[],
                actuals:[],
                designs:[],
                timers:[],
                actualn:[],
                designn:[],
                timern:[],
                datas: [
                    {
                        titles: "变电站数量:",
                        nums: 1300,
                        unit: "座",
                        kuang: require("../assets/img/infrastructure/圆角矩形 1 拷贝 3.png"),
                        logo: require("../assets/img/infrastructure/管廊图标_分变电所.png")
                    },
                    {
                        titles: "原油管线数量:",
                        nums: 234,
                        unit: "条",
                        kuang: require("../assets/img/infrastructure/圆角矩形 1 拷贝 3.png"),
                        logo: require("../assets/img/infrastructure/石油.png")
                    },
                    {
                        titles: "天然气管线数量:",
                        nums: 362,
                        unit: "条",
                        kuang: require("../assets/img/infrastructure/圆角矩形 1 拷贝 3.png"),
                        logo: require("../assets/img/infrastructure/天然气.png")
                    },
                    {
                        titles: "电网公里数:",
                        nums: 3332,
                        unit: "公里",
                        kuang: require("../assets/img/infrastructure/圆角矩形 1 拷贝 3.png"),
                        logo: require("../assets/img/infrastructure/电网企业.png")
                    },
                    {
                        titles: "原油管线里程数:",
                        nums: 1422,
                        unit: "公里",
                        kuang: require("../assets/img/infrastructure/圆角矩形 1 拷贝 3.png"),
                        logo: require("../assets/img/infrastructure/石油.png")
                    },
                    {
                        titles: "天然气管线里程数:",
                        nums: 2432,
                        unit: "公里",
                        kuang: require("../assets/img/infrastructure/圆角矩形 1 拷贝 3.png"),
                        logo: require("../assets/img/infrastructure/天然气.png")
                    }
                ],
                // urls:require("../assets/img/infrastructure/形状 79 拷贝 2.png"),
            };
        },
        mounted() {
            this.pip()
            this.$nextTick(function() {
                this.oilPipPower();
                this.electricPipPower();

            })
        },
        methods: {

            onclickOne(name) {
                if (name == "a") {
                    this.$nextTick(function() {
                        this.oilPipPower()
                    });
                }else if(name == "b"){
                    this.$nextTick(function() {
                        this.gasPipPower()
                    });
                } else if (name == "c") {
                    this.$nextTick(function() {
                        this.coalPipPower();
                    });
                }
            },
            onclickTwo(name) {
                //
                if (name == "1") {
                    this.$nextTick(function() {
                        this.electricPipPower();
                    });
                } else if (name == "2") {
                    this.$nextTick(function() {
                        this.oilReserves()
                    });
                } else if (name == "3") {
                    this.$nextTick(function() {
                        this.gasReserves();
                    });
                }
            },
            crudeOil(actualy,designy,timery) {//原油运行输量
                let myChart = echarts.init(document.getElementById("crudeOil"));
                // 指定图表的配置项和数据
                var option = {
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // title: {
                    //   text: "特性示例：渐变色 阴影 点击缩放",
                    //   subtext: "Feature Sample: Gradient Color, Shadow, Click Zoom"
                    // },
                    legend: {
                        show: true,
                        data: [{ name: "设计能力" }, { name: "实际输送" }],
                        orient: "horizontal",
                        x: "right",
                        y: " top",
                        padding: [10, 20, 0, 0],
                        itemWidth: 11, // 设置宽度
                        itemHeight: 1 // 设置高度
                    },
                    grid: {
                        x: 35,
                        x2: 26,
                        // y2: 60,
                        // width: {totalWidth} - x - x2,
                        // height: {totalHeight} - y - y2,
                        backgroundColor: "rgba(0,0,0,0)",
                        borderWidth: 1,
                        borderColor: "#ccc"
                    },
                    xAxis: {
                        data:timery,
                        // 'axisLabel':{'interval':0},
                        axisLabel: {
                            // inside: true,
                            interval: 0,
                            textStyle: {
                                color: "#000"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true
                        },
                        z: 70
                    },
                    yAxis: {
                        name: "万吨/年",
                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#999"
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: "#ccc"
                            }
                        }
                    },
                    // dataZoom: [
                    //     {
                    //         type: 'inside'
                    //     }
                    // ],
                    series: [
                        {
                            name: "设计能力",
                            data: designy,
                            type: "line",
                            smooth: false,
                            symbol: "none",
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        width: 2,
                                        type: "dotted" //'dotted'虚线 'solid'实线
                                    }
                                }
                            }
                        },
                        {
                            type: "bar",
                            name: "实际输送",
                            barWidth: 20,
                            itemStyle: {
                                // color:"#000"
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: "#12DFBE" },
                                        //   { offset: 0.5, color: "#188df0" },
                                        { offset: 1, color: "#466AFF" }
                                    ])
                                }
                            },
                            data:actualy
                        }
                    ]
                };
                myChart.setOption(option);
            },
            naturalGas(actualq,designq,timerq) {
                //天然气输送能力
                //  $("#naturalGas").css({"width":$("#naturalGas").width(),"height":$("#naturalGas").height()});
                let myCharts = echarts.init(document.getElementById("naturalGas"));
                //let num = 0;
                var options = {
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data:timerq
                    },
                    yAxis: {
                        type: "value"
                    },
                    legend: {
                        show: true,
                        data: [{ name: "设计能力" }, { name: "实际输送" }],
                        orient: "horizontal",
                        x: "right",
                        y: " top",
                        padding: [10, 20, 0, 0],
                        itemWidth: 11, // 设置宽度
                        itemHeight: 1 // 设置高度
                    },
                    grid: {
                        x: 45,
                        x2: 26,
                        // y2: 60,
                        // width: {totalWidth} - x - x2,
                        // height: {totalHeight} - y - y2,
                        backgroundColor: "rgba(0,0,0,0)",
                        borderWidth: 1,
                        borderColor: "#ccc"
                    },
                    series: [
                        {
                            name: "设计能力",
                            type: "line",
                            data: designq,
                            symbol: "none", //去掉折线图中的节点
                            symbolSize: 8,
                            itemStyle: {
                                normal: {
                                    // color: '#5583FDFF',
                                    // color: "#12DFBD",
                                    lineStyle: {
                                        width: 2,
                                        type: "dashed", //'dotted'虚线 'solid'实线
                                        color: "#F91B20"
                                    }
                                }
                            }
                        },
                        {
                            name: "实际输送",
                            data: actualq,
                            type: "line",
                            itemStyle: {
                                normal: {
                                    color: "rgb(174,237,255)",
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 0,
                                                color: "rgb(255,255,255,0.01)"
                                            },
                                            {
                                                offset: 1,
                                                color: "#12DFBE"
                                            }
                                        ])
                                    },
                                    lineStyle: {
                                        color: "#12DFBD"
                                    }
                                }
                            }
                        }
                    ]
                };
                // myCharts.setOption(options);
                // myCharts.resize();

                // function numb() {
                //     num = num + 5;
                //     myCharts.setOption(options, true);
                // }
                // setInterval(function() {
                //     numb();
                // }, 100);
                // 使用刚指定的配置项和数据显示图表。
                myCharts.setOption(options);
            },
            coal(actualc,designc,timerc) {
                // $("#crudeOil").css({"width":$("#crudeOil").width(),"height":$("#crudeOil").height()});
                // 基于准备好的dom，初始化echarts实例
                let myChar = echarts.init(document.getElementById("coal"));
                // 指定图表的配置项和数据
                var optio = {
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // title: {
                    //   text: "特性示例：渐变色 阴影 点击缩放",
                    //   subtext: "Feature Sample: Gradient Color, Shadow, Click Zoom"
                    // },
                    legend: {
                        show: true,
                        data: [{ name: "设计能力" }, { name: "实际输送" }],
                        orient: "horizontal",
                        x: "right",
                        y: " top",
                        padding: [10, 20, 0, 0],
                        itemWidth: 11, // 设置宽度
                        itemHeight: 1 // 设置高度
                    },
                    grid: {
                        x: 35,
                        x2: 26,
                        // y2: 60,
                        // width: {totalWidth} - x - x2,
                        // height: {totalHeight} - y - y2,
                        backgroundColor: "rgba(0,0,0,0)",
                        borderWidth: 1,
                        borderColor: "#ccc"
                    },
                    xAxis: {
                        data:timerc,
                        // 'axisLabel':{'interval':0},
                        axisLabel: {
                            // inside: true,
                            interval: 0,
                            textStyle: {
                                color: "#000"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true
                        },
                        z: 70
                    },
                    yAxis: {
                        name: "万吨/年",
                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#999"
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: "#ccc"
                            }
                        }
                    },
                    // dataZoom: [
                    //     {
                    //         type: 'inside'
                    //     }
                    // ],
                    series: [
                        {
                            name: "设计能力",
                            data: designc,
                            type: "line",
                            smooth: false,
                            symbol: "none",
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        width: 2,
                                        type: "dotted" //'dotted'虚线 'solid'实线
                                    }
                                }
                            }
                        },
                        {
                            type: "bar",
                            name: "实际输送",
                            barWidth: 20,
                            itemStyle: {
                                // color:"#000"
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: "#12DFBE" },
                                        //   { offset: 0.5, color: "#188df0" },
                                        { offset: 1, color: "#466AFF" }
                                    ])
                                }
                            },
                            data:actualc
                        }
                    ]
                };
                myChar.setOption(optio);
                setTimeout(function() {
                    window.onresize = function() {
                        myChar.resize();
                    };
                }, 200);
            },
            grids(actual,design,timer) {
                //第二个框红色柱状图   // 基于准备好的dom，初始化echarts实例
                // grids(urls){//第二个框红色柱状图   // 基于准备好的dom，初始化echarts实例
                let myChartt = echarts.init(document.getElementById("grids"));
                // 指定图表的配置项和数据
                // var url = '../assets/img/infrastructure/形状 79 拷贝 2.png'
                var optiont = {
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // title: {
                    //   text: "特性示例：渐变色 阴影 点击缩放",
                    //   subtext: "Feature Sample: Gradient Color, Shadow, Click Zoom"
                    // },
                    legend: {
                        show: true,
                        data: [{ name: "设计能力" }, { name: "实际输送" }],
                        orient: "horizontal",
                        x: "right",
                        y: " top",
                        padding: [10, 20, 0, 0],
                        itemWidth: 11, // 设置宽度
                        itemHeight: 1 // 设置高度
                    },
                    grid: {
                        x: 35,
                        x2: 26,
                        // y2: 60,
                        // width: {totalWidth} - x - x2,
                        // height: {totalHeight} - y - y2,
                        backgroundColor: "rgba(0,0,0,0)",
                        borderWidth: 1,
                        borderColor: "#ccc"
                    },
                    xAxis: {
                        'type':'category',
                        data:timer,
                        // 'axisLabel':{'interval':0},
                        axisLabel: {
                            // inside: true,
                            interval: 0,
                            textStyle: {
                                color: "#000"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true
                        },
                        z: 70
                    },
                    yAxis: {
                        name: "万吨/年",
                        'type':'value',
                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#999"
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: "#ccc"
                            }
                        }
                    },
                    // dataZoom: [
                    //     {
                    //         type: 'inside'
                    //     }
                    // ],
                    series: [
                        {
                            name: "设计能力",
                            data:design,
                            type: "line",
                            smooth: false,
                            symbol: "none",
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        width: 2,
                                        type: "dotted" //'dotted'虚线 'solid'实线
                                    }
                                }
                            }
                        },
                        {
                            type: "bar",
                            name: "实际输送",
                            data: actual,
                            //  data: (function() {
                            //     let arr = []
                            //     pieData.forEach((item)=>{
                            //       let obj = {value:0,name:''}
                            //       obj.name = getName(item)
                            //       obj.value = item.value
                            //       arr.push(obj)
                            //     })
                            //     return arr
                            //   })()
                            // },
                            barWidth: 20,
                            // url:require("../assets/img/infrastructure/形状 79 拷贝 2.png"),//./images/red.svg’;
                            // markPoint:{
                            // data:[
                            // {
                            // //xAxis :代表图标在x轴横向的位置，数值是data数组中的位置
                            // //yAxis：代表图标在y轴纵向的位置，data数组的最大值 ,图片放置高度
                            // //（大于最大值的原因是让最高的柱子与图标有点间距）
                            // xAxis:2,
                            // yAxis:4,
                            // symbolSize:[30, 20], //图片宽、高
                            // // symbol:urls,
                            // symbolOffset:[15,-260],
                            // silent:false,
                            // symbolKeepAspect: true,
                            // label:{
                            // normal:{
                            // // formatter:Math.formatNumber(9,2)+'%',
                            // color: 'red',
                            // fontSize:12
                            // }
                            // }
                            // },
                            // ]
                            // },
                            itemStyle: {
                                // color:"#000"
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: "#FB3939" },
                                        //   { offset: 0.5, color: "#188df0" },
                                        { offset: 1, color: "#FFA545" }
                                    ])
                                }
                            }
                        }
                    ]
                };
                myChartt.setOption(optiont);
            },
            store(actuals,designs,timers) {
                //天然气输送能力
                //  $("#naturalGas").css({"width":$("#naturalGas").width(),"height":$("#naturalGas").height()});
                let Charts = echarts.init(document.getElementById("store"));
                // let num = 0;
                var optios = {
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data:timers
                    },
                    yAxis: {
                        type: "value"
                    },
                    legend: {
                        show: true,
                        data: [{ name: "设计能力" }, { name: "实际输送" }],
                        orient: "horizontal",
                        x: "right",
                        y: " top",
                        padding: [10, 20, 0, 0],
                        itemWidth: 11, // 设置宽度
                        itemHeight: 1 // 设置高度
                    },
                    grid: {
                        x: 45,
                        x2: 26,
                        // y2: 60,
                        // width: {totalWidth} - x - x2,
                        // height: {totalHeight} - y - y2,
                        backgroundColor: "rgba(0,0,0,0)",
                        borderWidth: 1,
                        borderColor: "#ccc"
                    },
                    series: [
                        {
                            name: "设计能力",
                            type: "line",
                            data:designs,
                            symbol: "none", //去掉折线图中的节点
                            symbolSize: 8,
                            itemStyle: {
                                normal: {
                                    // color: '#5583FDFF',
                                    // color: "#12DFBD",
                                    lineStyle: {
                                        width: 2,
                                        type: "dashed", //'dotted'虚线 'solid'实线
                                        color: "#F91B20"
                                    }
                                }
                            }
                        },
                        {
                            name: "实际输送",
                            data: actuals,
                            type: "line",
                            itemStyle: {
                                normal: {
                                    color: "rgb(174,237,255)",
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 0,
                                                color: "rgb(255,255,255,0.01)"
                                            },
                                            {
                                                offset: 1,
                                                color: "#4181FF"
                                            }
                                        ])
                                    },
                                    lineStyle: {
                                        color: "#4181FF"
                                    }
                                }
                            }
                        }
                    ]
                };
                Charts.setOption(optios);
                setTimeout(function() {
                    window.onresize = function() {
                        Charts.resize();
                    };
                }, 200);
            },
            natural(actualn,designn,timern) {
                //天然气输送能力
                //  $("#naturalGas").css({"width":$("#naturalGas").width(),"height":$("#naturalGas").height()});
                let Chart = echarts.init(document.getElementById("natural"));
                // let num = 0;
                var optio= {
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: timern
                    },
                    yAxis: {
                        type: "value"
                    },
                    legend: {
                        show: true,
                        data: [{ name: "设计能力" }, { name: "实际输送" }],
                        orient: "horizontal",
                        x: "right",
                        y: " top",
                        padding: [10, 20, 0, 0],
                        itemWidth: 11, // 设置宽度
                        itemHeight: 1 // 设置高度
                    },
                    grid: {
                        x: 45,
                        x2: 26,
                        // y2: 60,
                        // width: {totalWidth} - x - x2,
                        // height: {totalHeight} - y - y2,
                        backgroundColor: "rgba(0,0,0,0)",
                        borderWidth: 1,
                        borderColor: "#ccc"
                    },
                    series: [
                        {
                            name: "设计能力",
                            type: "line",
                            data:designn,
                            symbol: "none", //去掉折线图中的节点
                            symbolSize: 8,
                            itemStyle: {
                                normal: {
                                    // color: '#5583FDFF',
                                    // color: "#12DFBD",
                                    lineStyle: {
                                        width: 2,
                                        type: "dashed", //'dotted'虚线 'solid'实线
                                        color: "#F91B20"
                                    }
                                }
                            }
                        },
                        {
                            name: "实际输送",
                            data:actualn,
                            type: "line",
                            itemStyle: {
                                normal: {
                                    color: "rgb(174,237,255)",
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 0,
                                                color: "rgb(255,255,255,0.01)"
                                            },
                                            {
                                                offset: 1,
                                                color: "#12DFBE"
                                            }
                                        ])
                                    },
                                    lineStyle: {
                                        color: "#12DFBD"
                                    }
                                }
                            }
                        }
                    ]
                };
                Chart.setOption(optio);
            },
            //变电站数量
            pip(){//
                this.$axios.post("mengenergy-background/InfrastructureBase/pip").then(res => {
                    this.datas[0].nums = res.body.electricNum;
                    this.datas[1].nums = res.body.oilNum;
                    this.datas[2].nums = res.body.gasNum;
                    this.datas[3].nums = res.body.electricAreaTotal;
                    this.datas[4].nums = res.body.oilMileageAreaTotal;
                    this.datas[5].nums = res.body.gasMileageAreaTotal;


                    });
            },
            //原油输送能力
            oilPipPower(){
                this.$axios.post("mengenergy-background/InfrastructureBase/oilPipPower").then(res => {

                        this.actualy = res.body.oilPower.yAxisData_2
                        this.designy = res.body.oilPower.yAxisData_1
                        this.timery = res.body.oilPower.xAxisData
                        this.crudeOil(this.actualy,this.designy,this.timery);
                    });
            },
            //天然气输送能力
            gasPipPower(){
                this.$axios.post("mengenergy-background/InfrastructureBase/gasPipPower").then(res => {

                        this.actualq = res.body.gasPower.yAxisData_2
                        this.designq = res.body.gasPower.yAxisData_1
                        this.timerq = res.body.gasPower.xAxisData
                    this.naturalGas(this.actualq,this.designq,this.timerq);
                    });
            },
            //煤炭输送能力
            coalPipPower(){
                this.$axios.post("mengenergy-background/InfrastructureBase/coalPipPower").then(res => {

                        this.actualc = res.body.coalPower.yAxisData_2
                        this.designc = res.body.coalPower.yAxisData_1
                        this.timerc = res.body.coalPower.xAxisData
                    this.coal(this.actualc,this.designc,this.timerc);
                    });
            },
            //电网线路输电容量
            electricPipPower(){
                this.$axios.post("mengenergy-background/InfrastructureBase/electricPipPower").then(res => {

                        this.actual = res.body.coalPower.yAxisData_2
                        this.design = res.body.coalPower.yAxisData_1
                        this.timer = res.body.coalPower.xAxisData
                        this.grids(this.actual,this.design,this.timer);
                    });
            },
            //原油储藏能力
            oilReserves(){
                this.$axios.post("mengenergy-background/InfrastructureBase/oilReserves").then(res => {

                        this.actuals = res.body.oilReserves.yAxisData_2
                        this.designs = res.body.oilReserves.yAxisData_1
                        this.timers = res.body.oilReserves.xAxisData
                        this.store(this.actuals,this.designs,this.timers);
                    });
            },
            //天然气储藏能力
            gasReserves(){
                this.$axios.post("mengenergy-background/InfrastructureBase/gasReserves").then(res => {

                        this.actualn = res.body.gasReserves.yAxisData_2
                        this.designn = res.body.gasReserves.yAxisData_1
                        this.timern = res.body.gasReserves.xAxisData
                        this.natural(this.actualn,this.designn,this.timern)
                    });
            },

        }
    };
</script>
<style lang="scss">
    #Infrastructure {
        width: 100%;
        background-color:#DBDBDB;
        .Infrastructure-map {
            background-color:#fff;

            position: relative;
            height: 6.2rem;
            width: 100% !important;
            // border: 1px solid red;
            .maps {
                position: absolute;
                width: 100%;
                height: 100%;
                iframe {
                    height: 6.2rem;
                    width: 100%;
                }
            }
            // .Infrastructure-header {
            //   position: absolute;
            // }
        }
        .Infrastructure-data {
            background-color:#fff;
            //margin-top: 0.2rem;
            height: 2.06rem;
            width: 100%;
            background: rgba(248, 251, 254, 0.77);
            // border: 1px solid #D6E6F4;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            .Infrastructure-datas {
                height: 1.56rem;
                width: 6.69rem;
                // background: darkgrey;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                > div {
                    padding-top: 0.1rem;
                }
                > div:nth-child(1),
                > div:nth-child(4) {
                    width: 29%;
                }
                > div:nth-child(1),
                > div:nth-child(2),
                > div:nth-child(3) {
                    border-top: none;
                }
                > div:nth-child(1),
                > div:nth-child(3) {
                    border-left: none;
                    border-right: none;
                }
                > div:nth-child(4),
                > div:nth-child(5),
                > div:nth-child(6) {
                    border-bottom: none;
                }
                > div:nth-child(4),
                > div:nth-child(6) {
                    border-left: none;
                    border-right: none;
                }
                > div {
                    //每一个盒子
                    width: 35%;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    border: 1px solid #d6e6f4;
                    > div:last-child {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                    }

                    > div {
                        //图标标题盒子
                        height: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                    }
                    > div:first-child {
                        //
                        width: 100%;
                        > div:first-child {
                            //图标
                            width: 0.31rem;
                            height: 0.31rem;
                            background: url("../assets/img/infrastructure/圆角矩形 1 拷贝 3.png")
                            no-repeat center;
                            background-size: 0.31rem 0.31rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        > div:last-child {
                            width: 85%;
                            font-size: 0.16rem;
                            color: #23252b;
                            font-family: MicrosoftYaHei;

                        }
                    }
                    > div:last-child {
                        > div:first-child {
                            //图标
                            width: 0.31rem;
                            height: 0.31rem;
                            text-align: left;
                        }
                        > div:last-child {
                            width: 95%;
                            font-size: 0.3rem;
                            color: #3d4246;
                            font-weight: 700;
                            > span {
                                font-size: 0.1rem;
                                color: #7e88a1;
                                /*padding: 0 0.1rem;*/
                            }
                        }
                        //单位小盒子
                    }
                }
            }
        }
        // .Infrastructure-header {
        //   z-index: 3;
        //   width: 50%;
        //   border-radius: 0.14rem;
        //   overflow: hidden;
        //   // position: absolute;
        //   // top: .2rem;
        //   // margin: auto;
        //   // left: 3%;
        //   .van-tabs--line .van-tabs__wrap {
        //     height: 2.32rem;
        //     .van-tabs__nav {
        //       flex-wrap: wrap;
        //       justify-content: space-between;
        //       padding: 0 0.25rem;
        //       .van-tabs__wrap--scrollable .van-tab {
        //         flex: 0 0 auto !important;
        //       }
        //       .van-tab {
        //         width: 1.3rem !important;
        //         height: 0.5rem !important;
        //         line-height: 0.5rem !important;
        //         background: url("../assets/img/infrastructure/圆角矩形 2.png")
        //           no-repeat center;
        //         background-size: 1.3rem 0.5rem;
        //         color: #fff;
        //         font-size: 12px;
        //         font-weight: 600;
        //         flex: 0 0 auto !important;
        //         padding: 0;
        //         img {
        //           vertical-align: middle;
        //           //   padding: 0 0.1rem 0 0;
        //         }
        //       }
        //       .van-tab--active {
        //         font-size: 12px;
        //         width: 1.2rem;
        //         font-weight: 600;
        //         background: rgba(128, 139, 148, 0.6);
        //         height: 0.5rem !important;
        //         line-height: 0.5rem !important;
        //         border-radius: 0.14rem;
        //         padding: 0;
        //       }
        //       .van-tabs__line {
        //         background: transparent;
        //       }
        //     }
        //   }
        // }

        .Infrastructure-chartOne {
            background-color:#fff;
            //margin-top: 0.2rem;
            width: 100%;
            height: 5.4rem;
            // border: 1px solid yellow;
            > div:first-child {
                width: 94%;
                height: 1rem;
                overflow: hidden;
                margin: auto;
                margin-top: 0.2rem;
                padding-top: 0.3rem;
                .van-tab {
                    //padding-top: 0.4rem;
                    //margin-top: 0.1rem;
                    height: 0.54rem !important;
                    line-height: 0.54rem !important;
                    background: #fff;
                    color: rgb(35, 107, 214);
                    font-size: 12px;
                    border-radius: 0.02rem;
                    border: 1px solid rgb(35, 107, 214);
                    // font-weight: 600;
                }
                .van-tab--active {
                    //margin-top: 0.2rem;
                    font-size: 12px;
                    // font-weight: 600;
                    background: rgb(35, 107, 214);
                    color: #fff;
                    height: 0.54rem !important;
                    line-height: 0.54rem !important;
                    border-radius: 0.02rem;
                }
            }
            > div:last-child {
                padding-top: 0.4rem;
                width: 100% !important;
                height: 4rem !important;
                position: relative;
                > div {
                    width: 100% !important;
                    height: 4rem !important;
                    position: absolute;
                }
            }
        }
        .Infrastructure-chartTwo {
            background-color:#fff;
            margin-top: 0.2rem;
            width: 100%;
            height: 5.4rem;
            // border: 1px solid red;
            > div:first-child {
                padding-top: 0.3rem;
                width: 94%;
                height: 1rem;
                overflow: hidden;
                margin: auto;
                margin-top: 0.2rem;
                .van-tab {
                    height: 0.54rem !important;
                    line-height: 0.54rem !important;
                    background: #fff;
                    color: rgb(35, 107, 214);
                    font-size: 12px;
                    border-radius: 0.02rem;
                    border: 1px solid rgb(35, 107, 214);
                    // font-weight: 600;
                }
                .van-tab--active {
                    font-size: 12px;
                    // font-weight: 600;
                    background: rgb(35, 107, 214);
                    color: #fff;
                    height: 0.54rem !important;
                    line-height: 0.54rem !important;
                    border-radius: 0.02rem;
                }
            }
            > div:last-child {
                margin-top: 0.4rem;
                width: 100% !important;
                height: 4rem !important;
                position: relative;
                > div {
                    width: 100% !important;
                    height: 4rem !important;
                    position: absolute;
                }
            }
        }
    }

    // ::v-deep.Infrastructure-header .van-tabs__wrap--scrollable .van-tab{
    //     flex: 0 0 auto;
    // }
</style>
